<template>
  <div class="qrcode-wrapper">
    <h2>
      <span class="s1" @click="goBack">
        <van-icon name="arrow-left" />
      </span>
      我的二维码
    </h2>
    <header class="header">
      <div class="logo">
        <van-icon name="contact" />
        <span class="q1">七鲜会员ID</span>
      </div>
      <div class="member">{{ member }}</div>
      <main class="content">
        <img :src="qrcodeUrl" alt="二维码" />
      </main>
      <div class="member1">{{ member1 }}</div>
    </header>
  </div>
</template>

<script>
export default {
  data() {
    return {
      member: "使用时请向店员出示，不用于支付",
      qrcodeUrl:
        "https://img2.baidu.com/it/u=2074132774,3953178130&fm=253&fmt=auto&app=138&f=GIF?w=200&h=200",
      member1: "jd_45278933456"
    };
  },
  methods: {
    goBack() {
      
      this.$router.back(-1);
    },
  },
};
</script>

<style scoped>
.qrcode-wrapper {
  width: 100%;
  height: 100%;
  background: #f6f6f6;
}

.s1 {
  position: absolute;
  left: 10px;
}

h2 {
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  position: relative;
}

.header {
  height: 400px;
  margin: 10px;
  background-color: #fff;
  border-radius: 10px;
}

.logo {
  width: 100%;
  height: 40px;
  line-height: 40px;
  color: #fff;
  border-radius: 10px;
  background: linear-gradient(to right, #008000, #004d00);
}

.q1 {
  margin-left: 10px;
}

.van-icon-contact {
  margin-left: 10px;
}

.member {
  text-align: center;
  margin-top: 15px;
  margin-bottom: 15px;
  color: #ccc;
  font-size: 12px;
}

.content {
  text-align: center;
}

.member1 {
  text-align: center;
  margin-top: 15px;
  margin-bottom: 15px;
  font-size: 12px;
}
</style>